<template>
  <div class="wrapper">
    <div class="container">
      <info-header @classChange="classChange"></info-header>

      <div class="task_list">
        <div class="today">
          <div class="title_box">
            <span class="title">今日任务</span>
            <div v-if="todayList.length > 0">
              <span class="task_status_uncomplete" v-if="todayIsFinish == 0">进行中</span>
              <span class="task_status_complete" v-else>已完成</span>
            </div>
          </div>

          <div v-if="todayIconList!=0" class="card_box" @click="toDetail">
            <div clickVoice="true">
              <ul class="card_list" clickVoice="true">
                <li class="card_item"  v-for="(item, index) in todayIconList" :key="index">
                  <span>{{item.name}}</span>
                </li>
              </ul>
            </div>
            <div class="btn_starStudy btnHover" clickVoice="true">开始学习</div>
          </div>

          
          <div v-if="todayIconList==0 && bmOnlineSubjectListFlag==1" class="card_box card_lock">
            <div >
              
            </div>
            <div class="btn_starStudy btn_starStudy_lock">开始学习</div>

          </div>


          <div v-if="bmOnlineSubjectListFlag == 0">
            <span class="no_task">今天没有学习任务，明天再来看看吧~</span>
          </div>
        </div>

        <!-- 过去任务 -->
        <div class="before" v-if="beforeList != 0">
          <van-collapse v-model="activeName" accordion @change="initBeforeData">
            <!-- <van-collapse-item icon="http://www.mingxiaoclub.cn/zebraOnline/icon_task.png" title="昨天任务" name="1">内容1<div slot="value"><i class="icon_complete"></i></div></van-collapse-item>
            <van-collapse-item icon="http://www.mingxiaoclub.cn/zebraOnline/icon_task.png" title="前天任务" name="2">内容2<div slot="value"><i class="icon_uncomplete"></i></div></van-collapse-item>
            <van-collapse-item icon="http://www.mingxiaoclub.cn/zebraOnline/icon_task.png" title="2月1日任务" name="3">内容3</van-collapse-item> -->

            <van-collapse-item
              v-for="(item, index) in beforeList" :key="index"
              icon="http://www.mingxiaoclub.cn/zebraOnline/img/icon_task.png" 
              :title="`${item.startTime}的任务`" 
              @change="initBeforeData"
              :name="item.startTime">
              <div class="card_box" v-if="beforeIconList!=0" @click="toBeforeDetail(item)">
                <div clickVoice="true">
                  <ul clickVoice="true" class="card_list">
                    <li class="card_item"  v-for="(item, index) in beforeIconList" :key="index">
                      <span>{{item.name}}</span>
                    </li>
                  </ul>
                </div>
                <div clickVoice="true" class="btn_starStudy btnHover">开始学习</div>
              </div>
              <!-- <div slot="value"><i :class="item.isFinish == 1 ? 'icon_complete' : 'icon_uncomplete'"></i></div> -->
            </van-collapse-item>
          </van-collapse>
        </div>
      
      </div>
    </div>
  </div>
</template>
<style>
.before .van-icon__image {
  width: 1.2em;
}
.before .van-cell__title{
  margin-left: .266667rem;
  font-size: .4rem
}
.before .van-cell__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.before .van-cell {
  padding: 15px 16px;
}
.before .van-cell__value > div {
  display: flex;
}
.before .van-collapse-item {
  margin-bottom: .133333rem;
}
</style>
<style scoped>
.no_task {
  font-size: .32rem;
  text-align: center;
  display: block;
  margin-top: 0.533333rem;
  color: #c0c4cc;
  letter-spacing: 2px;
}
.task_list .today {
  padding: 0 .533333rem;
  box-sizing: border-box;
}
.task_list .today .title_box {
  color: #333;
  font-size: .4rem;
  margin-top: .346667rem;
  display: flex;
  align-items: center;
}
.task_list .today .title {
  display: flex;
  align-items: center;
}
.task_list .today .title:before {
  content: '';
  display: inline-block;
  width: .173333rem;
  height: .533333rem;
  background: #ffd33d;
  border-radius: .133333rem;
  margin-right: .266667rem;
}
.task_list .task_status_complete {
  font-size: .32rem;
  display: inline-block;
  width: 1.32rem;
  height: .346667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #67C23A;
  border-radius: .266667rem;
  margin-left: .266667rem;
}
.task_list .task_status_uncomplete {
  font-size: .32rem;
  display: inline-block;
  width: 1.32rem;
  height: .346667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #ff617e;
  border-radius: .266667rem;
  margin-left: .266667rem;
}

.btn_starStudy {
  width: 5.4rem;
  height: 1.066667rem;
  background:linear-gradient(56deg,rgba(255,211,61,1) 0%,rgba(255,196,14,1) 100%);
  box-shadow:0px 0px 10px 3px rgba(203,203,203,0.5);
  margin: 0 auto;
  margin-top: .426667rem;
  font-size: .4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .8rem;
  color: #2b2b2b;
  font-weight: bold;
}



.card_box > div:first-child {
  position: relative;
  background: #fff;
  border-radius: .27rem;
  /* border-left: .266667rem solid #FE8697; */
  background: url('../assets/img/card_bg.png') 0 0 no-repeat;
  background-size: 100%;
  width: 100%;
  min-height: 4.746667rem;
  box-sizing: border-box;
  /* margin-top: .346667rem; */
  box-shadow:0px 0px 15px 2px rgba(223,223,223,0.5);
}
.card_box {
  background: #fff;
  border-radius: .4rem;
  padding: .3rem .266667rem .4rem;
  box-sizing: border-box;
  margin-top: .133333rem;
  box-shadow:0px 0px 10px 3px rgba(241,241,240,1);
}
.before .card_box > div:first-child {
  background: url('../assets/img/card_bg2.png') 0 0 no-repeat;
  background-size: 100%;
}

.card_lock > div:first-child {
  background: url('../assets/img/card_bg_lock.png') 0 0 no-repeat;
  background-size: 100%;
}
.btn_starStudy_lock {
  background: #ccc;
  color: #fff;
  box-shadow: none;
}

.card_list {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: .6rem .64rem .186667rem .4rem;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
}

.card_item {
  display: flex;
  flex-direction: column;
  /* width: 45%; */
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-bottom: .266667rem;
  width: 1.34rem;
  height: 1.34rem;
  border-radius: 50%;
  margin: .266667rem .186667rem;
  background: rgba(255, 255, 255, .65);
}
.card_item img {
  width: 100%;
}
.card_item:nth-child(odd) {
  /* margin-right: .666667rem; */
}
.card_item span {
  font-size: .373333rem;
  color: #333;
  display: inline-block;
  padding: .133333rem;
  line-height: .42rem;
}


.before {
  margin-top: .733333rem;
  margin-bottom: 1.333333rem;
}

</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("myStudy");

import infoHeader from '@/components/common/infoHeader.vue'
export default {
  name: 'myStudy',
  data() {
    return {
      activeName: '',
      babyInfo: {},
      todayList: [],
      todayIconList: [],
      beforeIconList: [],
      beforeList: [],
      nowDay: '',
      todayIsFinish: null,
      subjectPackageId: '',
      localId: '',
      bmOnlineSubjectListFlag: '',
      lockClass: false,
    }
  },

  created() {
    this.initBabyInfo();

    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();

    if(month < 10) {
      month = '0' + month
    }
    if(day < 10) {
      day = '0' + day
    }

    this.nowDay = `${year}-${month}-${day}`


    this.localId = localStorage.getItem('subjectPackageId')
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initBabyInfo() {
      this.formGet({
        API: 'queryStudentByOpenId',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        // console.log(res);
        if(!res) {
          this.$router.replace({
            name: 'login',
          })
        }
        this.babyInfo = res;
        this.subjectPackageId = this.localId || this.babyInfo.bmOnlineSubjectPackages[0].subjectPackageId;
        this.initData();
      }).catch(err => {

      })
    },

    initData() {
      this.formGet({
        API: 'queryMyStudy',
        data: {
          studentId: this.babyInfo.studentId,
          subjectPackageId: this.subjectPackageId,
        }
      }).then(res => {
        console.log(res)
        this.bmOnlineSubjectListFlag = res.bmOnlineSubjectListFlag
        this.todayList = res.bmOnlineSubjectList;
        this.beforeList = res.bmOnlineSubjectPackageSubjects;
        
        if(res.bmOnlineSubjectPackageSubjects.length > 0) {
          this.todayIsFinish = res.bmOnlineSubjectPackageSubjects[0].isFinish
        }
        console.log('a')
        
        if(this.beforeList.length > 0) {
          this.beforeList.forEach((item, index) => {
            if(item.startTime == this.nowDay) {
              this.beforeList.splice(index, 1);
            }
          })
        }
        console.log('b')


        this.todayIconList = [];
        // this.beforeIconList = [];
        // let timeStampArr = [];

        console.log(res.bmOnlineSubjectList.length)

        if(this.todayList.length > 0) {
          this.todayList.forEach(item => {
            let obj = {
              code: item.subjectType,
              name: this.filterName(item.subjectType)
            }
            this.todayIconList.push(obj)

            // item.timeStamp = new Date(item.startTime).getTime();
            // timeStampArr.pish(item.timeStamp)
          })
        }else{
          this.todayIconList = [];
        }
        

        

        console.log(this.todayIconList)
      }).catch(err => {

      })
    },

    classChange(e) {
      console.log(e)
      this.subjectPackageId = e;
      this.initData();
    },

    initBeforeData(e) {
      console.log(e)
      if(e) {
        let id = '';
        this.beforeList.forEach(item => {
          if(item.startTime == e) {
            id = item.subjectPackageId
          }
        })

        // return false;
        
        this.post({
          API: 'queryMyStudyForTime',
          data: {
            startTime: e,
            subjectPackageId: id
          }
        }).then(res => {
          console.log(res);
          this.beforeIconList = [];
          res.forEach(item => {
            let obj = {
              code: item.subjectType,
              name: this.filterName(item.subjectType)
            }
            this.beforeIconList.push(obj)
          })
          
        })
      }
    },

    filterName(type) {
      switch (type) {
        case 'pinyin':
          return '拼音'
          break;
        case 'shizi':
          return '识字'
          break;
        case 'jisuan':
          return '计算'
          break;
        case 'yingyu':
          return '英语'
          break;
        case 'tzyd':
          return '拓展阅读'
          break;
        case 'sxsw':
          return '数学思维'
          break;
        case 'zydk':
          return '作业打卡'
          break;
        case 'xgyc':
          return '习惯养成'
          break;
        case 'jyzzl':
          return '精英专注力'
          break;
        case 'hbyd':
          return '绘本阅读'
          break;
        case 'kxxsy':
          return '科学小实验'
          break;
        case 'cyms':
          return '创意美术'
          break;
        case 'cygs':
          return '成语故事'
          break;
        default:
          break;
      }
    },

    toDetail() {
      
      this.$router.push({
        name: 'taskDetail',
        params: {
          openId: this.$route.params.openId,
          // time: this.todayList[0].startTime,   // 2月12日日期有问题先写死
          time: this.nowDay,
          packageId: this.todayList[0].subjectPackageId,
        }
      })
    },
    toBeforeDetail(item) {
      console.log(item)
      // return false;
      this.$router.push({
        name: 'taskDetail',
        params: {
          openId: this.$route.params.openId,
          time: item.startTime,
          packageId: item.subjectPackageId,
        }
      })
    },

    
  },

  computed: {
    // ...mapState(['subjectPackageId'])
  },
  components: {
    infoHeader,
  }
}
</script>

